<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="MobileOptimized" content="width" >
<meta name="HandheldFriendly" content="true" >
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var info = (function( $, undefined ) {
    var pub = {};

    pub.init = function() {     
        //When news updated, display items in list
        amplify.subscribe( "categories.updated", function( news ) {
            displayNews( news );
        });
    };
    
    pub.getAndDisplayCategories = function() {
        //Starting loading animation
        $.mobile.pageLoading();  
        
        //Get news and add success callback using then
        getCategories().then( function() {
            //Stop loading animation on success
            $.mobile.pageLoading( true );    
        });    
    };
    
    function getCategories() {
		var categories = Android.getCategoriesJSON();
		var jsonCategories = $.parseJSON(categories);
		
		 amplify.publish( "categories.updated", jsonCategories );
		 
		 return jsonCategories;
    }
    
    function displayNews( news ) {
        var newsList = $( "#categoriesDemo" ).find( ".categoriesList" );
        
        //Empty current list
        newsList.empty();
        
        //Use template to create items & add to list
        $( "#categoryItem" ).tmpl( news.items ).appendTo( newsList );
        
        //Call the listview jQuery UI Widget after adding 
        //items to the list allowing correct rendering
        newsList.listview( "refresh" );        
    }
    
    return pub;
}( jQuery ));

info.init();
info.getAndDisplayCategories();
});//]]>  

</script>

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

<body>

<!-- home -->	
<div id="categoriesDemo" data-role="page">

<div data-role="header">
	<h4>AppUp Categories</h4>
</div>

	<div data-role="content">
		<div class="content-primary">
			<ol data-role="categoriesList" class="categoryItem"></ol> 
		</div>

		<input type="button" value="Get categories" onClick="showAndroidToast('Hello Android!') " />

	</div>
</div>

<script id="categoryItem" type="text/x-jquery-tmpl">
    <li data-messageId="${id}" class="categoryItem">
        <h3><a href="${name}">${name}</a></h3>
    </li>
</script>

</body>
</html>